var fs = require('fs');
var rootWidth = 14;
var nodeWidth = 25;
var nodeHeight = 30;
var circleR = 6;
var color = '#999';
var variable = `
$nodeHeight: ${nodeHeight}px;
$nodePadding: ${nodeWidth}px;
$rootNodePadding: ${rootWidth}px;
`;

function createSvg(data) {
    var body = '';
    if (data.circle) {
        body += `<circle cx='${data.circle.x}' cy='${data.circle.y}' fill='none'  stroke='${color}' r='6' />`;
    }
    if (data.path) {
        body += `<path d='${data.path}' style='fill:white;stroke:#999;stroke-width:1'/>`;
    }
    var svgTemplate = `data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='${data.width}' height='${data.height}'><g>${body}</g></svg>`;
    return 'url("' + svgTemplate + '") center center no-repeat';
}
// 通用参数
// 圆圈上线 竖直方向的起止位置
var lineOnCircleTopStart = 0;
var lineOnCircleTopEnd = (nodeHeight - circleR * 2) / 2;
var lineOnCircleBottomStart = 30 - (nodeHeight - circleR * 2) / 2 + 2;
var lineOnCircleBottomEnd = nodeHeight;
// 圆圈圆心 竖直方向 的起止位置
var rootCircleX = (rootWidth - circleR * 2) / 2 + circleR;
var normalCircleX = nodeWidth - circleR;
var circleY = lineOnCircleTopEnd + circleR;
// path的各个x坐标，y坐标
var rootLineX0 = rootWidth / 2;
var lineX0 = 0;
var lineX1 = nodeWidth - circleR * 2;
var lineX2 = nodeWidth - circleR;
var lineY0 = nodeHeight / 2;
// 生成root的9个背景
// root-normal-open
var rootNormalOpen = createSvg({
    width: rootWidth,
    height: nodeHeight,
    circle: {
        x: rootCircleX,
        y: circleY
    },
    path: `M${rootLineX0} 0 L${rootLineX0} ${lineOnCircleTopEnd} M${rootLineX0} ${lineOnCircleBottomStart} L${rootLineX0} ${lineOnCircleBottomEnd}`
});
var body = '';
body += `
$rootNormalOpen: ${rootNormalOpen};
`;
var rootNormalClose = createSvg({
    width: rootWidth,
    height: nodeHeight,
    circle: {
        x: rootCircleX,
        y: circleY
    },
    path: `M${rootLineX0} 0 L${rootLineX0} ${lineOnCircleTopEnd} M${rootLineX0} ${lineOnCircleBottomStart} L${rootLineX0} ${lineOnCircleBottomEnd} M${rootLineX0} ${lineOnCircleTopEnd + 2} L${rootLineX0} ${lineOnCircleBottomStart - 2}`
});
body += `
$rootNormalClose: ${rootNormalClose};
`;
console.log(body);
fs.writeFileSync('_variable.scss', variable + body);